<template>
  <div class="user-management-page">
    <div class="page-header">
      <h2 class="page-title">用户管理</h2>
    </div>

    <div class="user-list-container">
      <el-table
          :data="userList"
          stripe
          border
          @selection-change="handleSelectionChange"
          class="user-table">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="userID" label="用户ID" width="100"></el-table-column>
        <el-table-column prop="name" label="用户姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="isFrozen" label="状态" width="100">
          <template #default="scope">
            <!-- 修复状态判断逻辑 -->
            <el-tag :type="scope.row.isFrozen === 1 ? 'danger' : 'success'">
              {{ scope.row.isFrozen === 1 ? '已冻结' : '正常' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <!-- 修复按钮禁用状态判断 -->
            <el-button
                size="small"
                :disabled="scope.row.isFrozen === 1"
                @click="freezeUser(scope.row.userID)">
              冻结
            </el-button>
            <el-button
                size="small"
                type="primary"
                :disabled="scope.row.isFrozen === 0"
                @click="unfreezeUser(scope.row.userID)">
              解冻
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElTable, ElTableColumn, ElPagination, ElButton, ElTag } from 'element-plus';
import { getUserList, freezeUser as apiFreezeUser, unfreezeUser as apiUnfreezeUse } from '@/api/user.js';

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElPagination,
    ElButton,
    ElTag
  },
  setup() {
    const userList = ref([]);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const multipleSelection = ref([]);

    // 获取用户列表
    const fetchUserList = async () => {
      try {
        const res = await getUserList({
          page: currentPage.value,
          pageSize: pageSize.value
        });

        if (res.code === 1) {
          userList.value = res.data.items;
          total.value = res.data.total;
        } else {
          console.error('获取用户列表失败：', res.message);
          // 这里可以添加错误提示
        }
      } catch (error) {
        console.error('请求用户列表出错：', error);
        // 这里可以添加网络错误提示
      }
    };

    // 冻结用户
    const freezeUser = async (userId) => {
      if (!userId) return;

      try {
        const res = await apiFreezeUser(userId);

        if (res.code === 1) {
          // 操作成功，刷新列表
          fetchUserList();
          // 提示成功
          console.log('用户冻结成功');
        } else {
          console.error('冻结用户失败：', res.message);
          // 提示失败
        }
      } catch (error) {
        console.error('请求冻结用户出错：', error);
        // 提示网络错误
      }
    };

    // 解冻用户
    const unfreezeUser = async (userId) => {
      if (!userId) return;

      try {
        const res = await apiUnfreezeUse(userId);

        if (res.code === 1) {
          // 操作成功，刷新列表
          fetchUserList();
          // 提示成功
          console.log('用户解冻成功');
        } else {
          console.error('解冻用户失败：', res.message);
          // 提示失败
        }
      } catch (error) {
        console.error('请求解冻用户出错：', error);
        // 提示网络错误
      }
    };

    // 分页相关方法
    const handleSizeChange = (newSize) => {
      pageSize.value = newSize;
      fetchUserList();
    };

    const handleCurrentChange = (newPage) => {
      currentPage.value = newPage;
      fetchUserList();
    };

    // 处理选中项变化
    const handleSelectionChange = (val) => {
      multipleSelection.value = val;
    };

    onMounted(() => {
      fetchUserList();
    });

    return {
      userList,
      currentPage,
      pageSize,
      total,
      fetchUserList,
      freezeUser,
      unfreezeUser,
      handleSizeChange,
      handleCurrentChange,
      handleSelectionChange
    };
  }
};
</script>

<style scoped>
.user-management-page {
  padding: 20px;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.user-list-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.user-table {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>